<template>
  <div class="nav_menu">
    <el-row class="tac" :class="{ 'el-row-show': !$store.state.isCollapse }">
      <el-col :class="{ 'el-col-show': !$store.state.isCollapse }">
        <el-menu
        :unique-opened="true"
          :collapse="$store.state.isCollapse"
          :router="true"
          :default-active="this.$router.path"
          class="el-menu-vertical-demo"
          background-color="rgb(1,20,44)"
          text-color="rgb(220,212,211)"
          active-text-color="#fff"
        >
          <el-submenu
            v-for="(item, index) in this.$store.state.roleMenu"
            :key="item.name"
            :index="index + ''"
          >
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                @click="addHistory(item)"
                v-for="item in item.subitem"
                :key="item.subitem"
                :index="item.path"
                >{{ item.name }}</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "NavMenu",
  data() {
    return {
      isCollapse: true,     
    };
  }, 
  methods: {
    addHistory(item) {
      let obj = {
        name: item.name,
        path: item.path,
      };
      this.$store.commit("addHistory", obj);
    },
     
  },
};
</script>

<style scoped>
  
  
.el-menu-item-group >>> .el-menu-item {
  box-sizing: border-box;
  height: 50px;
  line-height: 50px;
  padding: 0;
  padding-left: 50px !important;
  min-width: unset;
  text-align: left;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
 
}

.el-menu > .el-submenu >>> .el-submenu__title {
  padding: 0;
  text-align: left;
}

.el-menu-vertical-demo {
  min-height: 100vh;
}
.el-menu-item {
  background-color: rgb(1, 11, 23) !important;
}

/* 设置鼠标选中时el-menu-item的样式 */
.el-menu-item.is-active {
  background-color: rgb(0, 159, 254) !important;
}

/* 设置鼠标悬停时el-menu-item的样式 */
.el-menu-item:hover:hover {
  background-color: rgb(0, 159, 254) !important;
  color: #fff !important;
}
.el-col {
  width: unset !important;
}
.el-col-show {
  width: 200px !important;
}
.el-row-show {
  width: 200px !important;
}
.tac {
  height: 100vh !important;
}
</style>

<style lang="less">
// 设置鼠标悬停时el-submenu的样式
.el-submenu .el-submenu__title:hover {
  background-color: unset !important;
  color: #fff !important;
}
</style>